<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="__PUBLIC__/js/bootstrapvalidator/css/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/js/jquery-upload/css/jquery.fileupload.css" />
    <link rel="stylesheet" href="__PUBLIC__/js/jquery-upload/css/jquery.fileupload-ui.css" />
    <script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/vendor/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload-ui.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-upload/js/jquery.fileupload-process.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
</head>
<body>
<div class="modal-dialog" role="document" style="width:800px;">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel"><if condition="$id">修改出租<else/>添加出租</if></h4>
        </div>
        <form class="form-horizontal" style="padding:4%;height:500px;overflow-y:auto;" id="houseForm">
            <input type="hidden" name="id" value="{$lease.id}"/>
            <div class="form-group">
                <label class="control-label col-sm-2">房间号:</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" name="room" value="{$lease.room}" placeholder="请输入房间号">
                </div>
                <label class="control-label col-sm-2">所属区域:</label>
                <div class="col-sm-4">
                    <select name="org_id" id="org_id" class="form-control">
                        <option value="">--请选择--</option>
                        <volist name="orgList.rows" id="org">
                            <if condition="$org.pid eq 0">
                                <optgroup label="{$org.name}"></optgroup>
                            <else/>
                                <option value="{$org.id}" <if condition="$lease['org_id'] eq $org['id']">selected</if>>{$org.name}</option>
                            </if>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">所属楼宇:</label>
                <div class="col-sm-4">
                    <select name="house_id" class="form-control" id="house_id">
                        <option value="">--请选择--</option>
                    </select>
                </div>
                <label class="control-label col-sm-2">所属楼层:</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" name="floor_info" value="{$lease.floor_info}" placeholder="请输入楼层">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">出租面积:</label>
                <div class="col-sm-4">
                    <div class="input-group">
                        <input type="text" class="form-control" name="area" value="{$lease.area}" placeholder="请输入出租面积">
                        <div class="input-group-addon">m&sup2;</div>
                    </div>
                </div>
                <label class="control-label col-sm-2">租金:</label>
                <div class="col-sm-4">
                    <div class="input-group">
                        <input type="text" class="form-control" name="rent_month" value="{$lease.rent_month}" placeholder="请输入租金">
                        <div class="input-group-addon">元/月</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">装修类型:</label>
                <div class="col-sm-4">
                    <select name="decoration" class="form-control" id="decoration">
                        <option value="1" <if condition="$lease['decoration'] eq 1">selected</if>>豪华装修</option>
                        <option value="2" <if condition="$lease['decoration'] eq 2">selected</if>>中等装修</option>
                        <option value="3" <if condition="$lease['decoration'] eq 3">selected</if>>简装</option>
                        <option value="4" <if condition="$lease['decoration'] eq 4">selected</if>>毛坯</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">联系人:</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" name="contacts" value="{$lease.contacts}">
                </div>
                <label class="control-label col-sm-2">联系电话:</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" name="contact_phone" value="{$lease.contact_phone}">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">房源描述:</label>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="3" name="description">{$lease.description}</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">图片:</label>
                <div class="col-sm-10">
                		<span class="btn btn-primary fileinput-button">
					        <i class="glyphicon glyphicon-plus"></i>
					        <span>选择文件</span>
                            <!-- The file input field used as target for the file upload widget -->
					        <input id="fileupload" type="file" name="files[]" multiple>
					    </span>
                    <!-- The container for the uploaded files -->
                    <div id="files" class="files">
                        <foreach name="lease.attachment" item="attache">
                            <img src="__ROOT__{$attache.attachment}" style="width:60px;height:60px;margin:10px;" onclick="removeImg(this,'{$attache.id}')">
                        </foreach>
                    </div>
                    <input type="hidden" name="attache" id="attache" value=""/>
                    <input type="hidden" name="removed" id="removed" value=""/>
                </div>
            </div>
            <input type="hidden" name="token" value="{$formToken}">
        </form>
        <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
            <button type="button" id="save" class="btn btn-primary">保存</button>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_map"></div>
<script type="text/javascript">
    var leaseId = "{$lease.id}";
    var houseId = "{$lease.house_id}";
    var attache = [];
    var removed = [];
    var webRoot = "__ROOT__";
    $(function(){
        $("#org_id").bind("change",getHouse);
        if(leaseId){
            getHouse();
        }
        $('#fileupload').fileupload({
            url: "{:U('Admin/Upload/index')}",
            dataType: "json",
            formData: {type:"lease"},
            autoUpload: true,
            singleFileUploads: false,
            done: function (e, data) {
                var files = data.result;
                for(var i=0;i<files.length;i++){
                    var file = files[i];
                    attache.push(file.attachement_id);
                    var item = '<img src="'+webRoot+file.filePath+'" style="width:60px;height:60px;margin:10px;" onclick="removeImg(this,\''+file.attachement_id+'\')">'
                    $(item).appendTo('#files');
                }
            }
        });
        $("#save").bind("click",doSave);
    });

    function getHouse(){
        var org_id = $("#org_id").val();
        if(org_id == ""){
            $("#house_id option").remove();
            $("#house_id").append('<option value="">--请选择--</option>');
            return;
        }
        common.ajax("{:U('Api/House/getAllHouse')}",{org_id:org_id},function(cb){
            $("#house_id option").remove();
            if(cb.data){
                var html = '<option value="">--请选择--</option>';
                $.each(cb.data,function(index,item){
                    var strSelect = '';
                    if(item.id == houseId){
                        strSelect = ' selected';
                    }
                    html += '<option value="'+item.id+'"'+strSelect+'>'+item.name+'</option>';
                });
                $("#house_id").append(html);
            }
        });
    }

    var commitFlag = false;
    function doSave(){
        if(commitFlag){
            common.alert("提示","请勿重复提交");
            return;
        }
        commitFlag = true;
        if(!validateForm()){
            commitFlag = false;
            return false;
        }
        if($("#files").children("img").length == 0){
            if(attache.length == 0){
                commitFlag = false;
                common.alert("提示","请至少上传一张图片!");
                return false;
            }
        }
        $("#attache").val(attache.toString());
        $("#removed").val(removed.toString());
        $.ajax({
            url: "{:U('Admin/Rental/doSave')}",
            type: "post",
            dataType: "json",
            data: $("#houseForm").serialize(),
            success: function (data) {
                if(data.status){
                    common.alert("提示",data.msg,function(){
                        common.reload();
                    });
                }else{
                    commitFlag = false;
                    common.alert("提示",data.msg);
                }
            }
        });
    }

    function removeImg(obj,id){
        removed.push(id);
        $(obj).remove();
        attache.remove(id);
    }

    function validateForm(){
        $('#houseForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                //invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                room: {
                    validators: {
                        notEmpty: {
                            message: '房间号不能为空'
                        }
                    }
                },
                org_id: {
                    validators: {
                        notEmpty: {
                            message: '所属区域不能为空'
                        }
                    }
                },
                house_id: {
                    validators: {
                        notEmpty: {
                            message: '所属楼宇不能为空'
                        }
                    }
                },
                floor_info: {
                    validators: {
                        notEmpty: {
                            message: '所属楼层不能为空'
                        }
                    }
                },
                area: {
                    validators: {
                        notEmpty: {
                            message: '出租面积不能为空'
                        },
                        regexp: {
                            regexp: /((^[1-9]+[0-9]*)|^0)(\.\d{0,2})?$/,
                            message: '出租面积必须为数字，最多2位小数'
                        }
                    }
                },
                rent_month: {
                    validators: {
                        notEmpty: {
                            message: '租金不能为空'
                        },
                        regexp: {
                            regexp: /((^[1-9]+[0-9]*)|^0)(\.\d{0,2})?$/,
                            message: '租金必须为数字，最多2位小数'
                        }
                    }
                },
                contacts: {
                    validators: {
                        notEmpty: {
                            message: '联系人不能为空'
                        }
                    }
                },
                contact_phone: {
                    validators: {
                        notEmpty: {
                            message: '联系电话不能为空'
                        }
                    }
                },
            }
        });
        var data = $('#houseForm').data('bootstrapValidator');
        if (data) {
            data.validate();
            if (!data.isValid()) {
                return false;
            }
        }
        return true;
    }
</script>
</body>
</html>